<template>
	<view class="my">
		<!-- 顶部 -->
		<view class="my-top">
			<view class="my-top-left"><image class="head-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image></view>
			<!-- <view class="my-top-right my-top-right-nologin">
				<view class="wdl-title">未登录</view>
				<view class="wdl-text">登录更安全，可领取积分等活动～</view>
			</view> -->
			<view class="my-top-right my-top-right-login">
				<view class="wdl-title">昵称</view>
				<button class="qiandao-btn" @click="toSignIn">签到</button>
			</view>
		</view>
		<view class="content-padding">
			<!-- 分类列表 -->
			<view class="my-classify-list">
				<view class="my-classify-item">
					<icon class="my-icon-MFWZ"></icon>
					<text>免费问诊</text>
					<button class="share-btn" open-type="contact"></button>
				</view>
				<view class="my-classify-item" @click="toRecord">
					<icon class="my-icon-JZJL"></icon>
					<text>就诊记录</text>
				</view>
				<view class="my-classify-item" @click="onCatArchives">
					<icon class="my-icon-MMDA"></icon>
					<text>猫咪档案</text>
				</view>
				<view class="my-classify-item" @click="toIntegraList">
					<icon class="my-icon-MDJF"></icon>
					<text>我的积分</text>
				</view>
			</view>
			<!-- 关注公众号 -->
			<view class="attention-gzh">
				<text>关注“大树宠医”公众号，超多福利不错过</text>
				<button class="attention-gzh-btn">去关注</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// 跳转签到页面
		toSignIn() {
			uni.navigateTo({
				url: `/pagesIntegral/integralSignIn/integralSignIn`
			});
		},
		// 跳转积分列表
		toIntegraList() {
			uni.navigateTo({
				url: `/pagesIntegral/integralList/integralList`
			});
		},
		// 跳转就诊记录
		toRecord() {
			uni.navigateTo({
				url: `/pagesRecord/recordList/recordList`
			});
		},
		// 跳转猫咪档案列表
		onCatArchives() {
			uni.navigateTo({
				url: `/pagesArchives/archivesList/archivesList`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.my-top {
	display: flex;
	align-items: center;
	padding: 164rpx 52rpx 160rpx;
	box-sizing: border-box;
	width: 100%;
	height: 438rpx;
	background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/my-top-bgimg.png) no-repeat;
	background-size: cover;
	.my-top-left {
		width: 112rpx;
		height: 112rpx;
		background: #999999;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
		.head-img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.my-top-right {
		flex: 1;
		margin-left: 24rpx;
		color: #ffffff;
		.wdl-title {
			font-size: 48rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 33px;
			margin-bottom: 2rpx;
		}
		.wdl-text {
			font-size: 28rpx;
			color: #ffffff;
		}
	}
	.my-top-right-login {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.qiandao-btn {
			width: 172rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #ffffff;
			border-radius: 28rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #34d1a9;
		}
	}
}
.content-padding {
	padding: 32rpx 30rpx 0;
	border-radius: 40rpx 40rpx 0px 0px;
	margin-top: -60rpx;
	background: #ffffff;
	.my-classify-list {
		margin-bottom: 30rpx;
		.my-classify-item {
			padding: 0 16rpx;
			height: 120rpx;
			border-bottom: 2rpx solid #f2f2f2;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
			position: relative;
			.share-btn {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
			}
			&:nth-last-of-type(1) {
				border: none;
			}
			& > icon {
				width: 46rpx;
				height: 46rpx;
				margin-right: 22rpx;
			}
			.my-icon-MFWZ {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-my-mfwz.png) no-repeat center center;
				background-size: 42rpx 46rpx;
			}
			.my-icon-JZJL {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-my-jzjl.png) no-repeat center center;
				background-size: 40rpx 46rpx;
			}
			.my-icon-MMDA {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-my-mmda.png) no-repeat center center;
				background-size: 42rpx 46rpx;
			}
			.my-icon-MDJF {
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-my-grjf.png) no-repeat center center;
				background-size: 42rpx 42rpx;
			}
		}
	}
	.attention-gzh {
		height: 92rpx;
		background: rgba(52, 209, 169, 0.1);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 20rpx;
		& > text {
			font-size: 24rpx;
			font-weight: 500;
			color: #39d2ab;
		}
		.attention-gzh-btn {
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #34d1a9;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
